<template>
    <div class="search">
        <el-autocomplete v-model="searchContent" :fetch-suggestions="querySearchAsync" @select="handleSelect"
            :trigger-on-focus="false" :debounce="1000" placeholder="请输入医院名称" clearable />
        <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Search } from "@element-plus/icons-vue"
import { reqHospitalInfo } from '@/api/home';
import { useRouter } from 'vue-router';
const searchContent = ref('')

const querySearchAsync = (queryString: string, callback: any) => {
    reqHospitalInfo(queryString).then(res => {
        res.data
        let suggestionData: Object[] = res.data.map(item => {
            return {
                value: item.hosname,
                code: item.hoscode
            }
        });
        callback(suggestionData)
    });
}

let $router = useRouter()

const handleSelect = (item: any) => {
    searchContent.value = item.hosname
    // 路由跳转到指定医院详情页.
    $router.push({
        path: '/hospital/register',
        query: {
            hoscode: item.code
        }
    })
}

</script>

<style lang="scss" scoped>
//CSS深度选择器（选择下级样式）:>>>（原生CSS）  /deep/（Less） :deep()（Sass）
.search {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;

    :deep(.el-autocomplete) {
        width: 70%;
        margin-right: 10px;
        border-radius: 0%;
    }
}
</style>